<template>
  <div class='container'>
    <el-dialog
      title="预览文章"
      v-if="show"
      :visible="show"
      @close='close'
      width="40%">
        <h2>{{ text.title }}</h2>
        <el-row type="flex">
          <el-col :span="12">
            <p>{{ text.createTime | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}</p>
          </el-col>
          <el-col :span="6">
            <p>{{ text.username }}</p>
          </el-col>
          <el-col>
            <span>
              <svg-icon class-name='international-icon' icon-class="eyes" />
              {{  text.visits }}
            </span>
          </el-col>
        </el-row>
        <el-card>
          <p v-html="text.articleBody" ref="textvalue"></p>
        </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
export default {
  name: 'artprev',
  data(){
    return {
      text: {}
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close(){
      this.$emit('close')
    },
    async detail(row) {
      const { data } = await detail(row)
      this.text = data
      this.text.username = row.username
    }
  }
}
</script>

<style scoped>
.el-col {
  display: flex;
  align-items: center;
}
/deep/img {
  max-width: 100%!important;
  height: auto;
}
</style>
